<template>
  <div class="qr-content">
    <img class="qr-content-img" src="../../assets/distribution/QRcode.png" alt>
    <p>
      <a href="https://wyx.edusoho.cn/merchant/activities/127971/qrcode?download=true">下载二维码</a>
    </p>
    <p>微信扫一扫</p>
    <p>即可将活动分享至微信好友，朋友圈</p>
    <p>活动页地址:</p>
    <p>
      https://wyx.edusoho.cn/h5/a/groupon/show/127971
      <el-button
        type="button"
        class="tag-read el-button el-button--default el-button--small"
        data-clipboard-text="https://wyx.edusoho.cn/h5/a/groupon/show/127971"
        @click="copyLink"
      >点击复制</el-button>
    </p>
    <p>推广渠道:</p>
    <p>该活动可推广至新版微网校的发现页</p>
    <div class="el-row">
      <el-button data-v-d74c4cfa type="button" class="el-button el-button--default">去新版微网校推广</el-button>
    </div>
  </div>
</template>
<script>
// 引入复制插件
import Clipboard from 'clipboard'
export default {
  data() {
    return {
    }
  },
  methods: {
    copyLink() {
      var clipboard = new Clipboard('.tag-read')
      this.$message({
        message: '复制成功',
        type: 'success'
      })
      clipboard.on('success', e => {
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.qr-content {
  text-align: center;
  .qr-content-img {
    width: 320px;
    height: 320px;
  }
  p a {
    color: #20a0ff;
  }
}
</style>

